<template>
  <div>
    <el-form ref="form" :model="list" :rules="rules">
      <el-form-item v-if="showProv" class="inlineCt inlineLabel10" prop="provinceId">
        <el-select
          v-model="list.provinceId"
          v-loading="provinceLoading"
          placeholder="省："
          style="width: 180px;"
          @change="provinceChange"
        >
          <el-option
            v-for="item in provinceOptions"
            :key="item.id"
            :label="item.shortName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="showCity" label class="inlineCt inlineLabel10" prop="cityId">
        <el-select
          v-model="list.cityId"
          v-loading="cityLoading"
          placeholder="市："
          style="width: 180px;"
          @change="cityChange"
        >
          <el-option
            v-for="item in cityOptions"
            :key="item.id"
            :label="item.shortName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="showArea" label class="inlineCt inlineLabel10" prop="areaId">
        <el-select
          v-model="list.areaId"
          v-loading="areaLoading"
          placeholder="区："
          style="width: 180px;"
          @change="areaChange"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.id"
            :label="item.groupName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import * as api from '@/api/components'
import * as userApi from '@/api/user'

let defaultList = {
  provinceId: null,
  cityId: null,
  areaId: null
}

export default {
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    showProv: {
      type: Boolean,
      default: true
    },
    showCity: {
      type: Boolean,
      default: true
    },
    showArea: {
      type: Boolean,
      default: true
    },
    register: {      //  false  为注册时的省接口地址判断
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      list: Object.assign({}, defaultList),
      rules: this.rules,
      provinceLoading: false,
      cityLoading: false,
      areaLoading: false,
      provinceOptions: [],
      cityOptions: [],
      areaOptions: []
    }
  },
  watch: {
    value(newVal, oldVal) {
      console.log('watch value', newVal)
      this.filterOptions(newVal)
    }
  },
  created() {
    this.getProvince()
    this.filterOptions(this.value)
  },
  methods: {
    /* 同步val值变化 */
    emitInput() {
      let arr = [this.list.provinceId, this.list.cityId, this.list.areaId]
      this.$emit('input', arr)
    },
    /* 回显值 */
    filterOptions(newVal) {
      if (newVal.length === 0) {
        this.resetId()
        return
      }
      this.list.provinceId = newVal[0]
      if (
        newVal[1] &&
        (this.cityOptions.length <= 1 || this.list.cityId !== newVal[1])
      ) {
        this.getCity(newVal[0])
      }
      this.list.cityId = newVal[1] ? newVal[1] : null

      if (
        newVal[2] &&
        (this.areaOptions.length === 0 || this.list.areaId !== newVal[2])
      ) {
        this.getArea(newVal[1])
      }
      this.list.areaId = newVal[2] ? newVal[2] : null
    },
    /* 选择省 */
    provinceChange(id) {
      console.log('provinceChange', id)
      this.cityOptions = []
      this.list.cityId = null
      this.areaOptions = []
      this.list.areaId = null
      this.getCity(id)
      this.$emit('input', [this.list.provinceId, null, null])
    },
    /* 选择市 */
    cityChange(id) {
      console.log('cityChange', id)
      this.list.areaId = null
      this.areaOptions = []
      this.getArea(id)
      this.$emit('input', [this.list.provinceId, this.list.cityId, null])
    },
    /* 选择区 */
    areaChange(id) {
      console.log('areaChange', id)
      this.emitInput()
    },
    /* 获取省 */
    getProvince() {
      this.provinceOptions = [
        {
          shortName: '全国',
          id: '0'
        }
      ]
      if (!this.showProv) {
        return
      }
      this.provinceLoading = true
      if(!this.register){
        api
          .getProvinceRegister()
          .then(response => {
            this.provinceOptions = this.provinceOptions.concat(response.data)
            this.provinceLoading = false
          })
          .catch(err => {
            this.provinceLoading = false
          })
        return
      }
      api
        .getProvince()
        .then(response => {
          this.provinceOptions = this.provinceOptions.concat(response.data)
          this.provinceLoading = false
        })
        .catch(err => {
          this.provinceLoading = false
        })
    },
    /* 获取市 */
    getCity(id) {
      this.cityOptions = []
      if (id == '0') {
        this.cityOptions = [
          {
            shortName: '全国',
            id: '0'
          }
        ]
        return
      }
      if (!this.showCity) {
        return
      }
      this.cityLoading = true
      api
        .getCity(id)
        .then(response => {
          this.cityOptions = this.cityOptions.concat(response.data)
          this.cityLoading = false
        })
        .catch(err => {
          this.cityLoading = false
        })
    },
    /* 获取区 */
    getArea(id) {
      this.areaOptions = []
      if (id == '0') {
        this.areaOptions = [
          {
            groupName: '全国',
            id: '0'
          }
        ]
        return
      }
      if (!this.showArea) {
        return
      }
      this.areaLoading = true
      userApi
        .getAreaSuspendByCityId(id)
        .then(response => {
          this.areaOptions = this.areaOptions.concat(response.data)
          this.areaLoading = false
        })
        .catch(err => {
          this.areaLoading = false
        })
    },
    /* 清空选择状态 */
    resetId() {
      this.list.provinceId = null
      this.list.cityId = null
      this.list.areaId = null
    }
  }
}
</script>
